<template>
    <div class="">
      <div class="ulContent mui-text-center" v-show="bottomShow" :id="faClass">
        <ul class="titleLi" style="margin: 0px;padding: 0px" ref="list2">
          <li :class="ulShow1?'active1':'tr'" @click.stop="unitSelect(1)">州市</li>
          <li :class="ulShow2?'active1':'tr'" @click.stop="unitSelect(2)">区县</li>
          <li :class="ulShow3?'active1':'tr'" @click.stop="unitSelect(3)">单位</li>
        </ul>
        <div class="info1" :style="{display:selec==0?'none': 'block'}" ref="cityScroll">
          <div class="right right1 mui-text-center" id="rr" >
              <ul id="ul" :style="{display:selec==0?'none': 'block'}" ref="list1" v-show="ulShow1">
                <li v-for="(item,index) in selectList1" :key="index"
                    @click.stop="goNone(selectList1[index],index)" :class="classe[index]">
                  {{item.Name}}
                </li>
              </ul>
            <ul id="ul1" :style="{display:selec==0?'none': 'block'}" v-show="ulShow2">
              <li class="fullscreen" v-for="(item,index) in arr" :key="index" @click.stop="goNone1(arr[index],index)" :class="classe1[index]" >{{item.Name}}
              </li>
            </ul>
            <ul id="ul2" :style="{display:selec==0?'none': 'block'}" v-show="ulShow3">
              <li v-for="(item,index) in arr2" :key="index" @click.stop="goNone2(arr2[index],index)"  >{{item.Name}}
              </li>
            </ul>

          </div>
        </div>


      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "unitSelect.vue",
      data(){
          return{
            UserId:'',
            // bottomShow:true,
            selec:0,
            arr:[],
            arr2:[],
            classe:[],
            classe1:[],
            bottomShow:true,
            formData:{},
            ulShow1:true,
            ulShow2:false,
            ulShow3:false,
            selectList1:{},

          }
      },
      props:{
        faClass:{
          type:String
        },
        outKey:{
          type:String
        }

      },
      created(){
        let me=this
        me.selec=!this.selec;
        me.$Global.zcServer.Post({
          IsNeedLogin:'false',
          Paras:{
            UserId:me.$Global.UserId,
            Name:'Vue_WorkUnit',
            Action:'City',
            Data:{
            }
          },
          Callback:me.Callback_City,
          Scope:me
        });
      },
      methods:{
        /*回调函数*/
        cb_regist(resJson,scope){
          console.log(resJson)
        },
        Callback_City(resJson,scope){
          console.log(resJson)
          this.selectList1=resJson.data
          this.$nextTick(()=>{
            this.scroll = new BScroll(this.$refs.cityScroll, {
              probeType: 3,
              click:true,
              scrollX: false
            })
          })
        ;
        },
        Callback_Xian(resJson,scope){
          this.arr=resJson.data

        },
        Callback_Unit(resJson,scope){
          console.log(resJson)
          this.arr2=resJson.data
        },
        goNone(index,index2){
          this.classe1=[];
          this.WorkUnit='';
          this.WorkUnit+=index.Name+'-';
          this.ulShow1=false;
          this.ulShow2=true;
          this.ulShow3=false;
          this.classe=[];
          let list1=this.$refs.list1.getElementsByTagName("li")
          console.log(index2)
          console.log(list1.length)
          for(let key=0;key<list1.length;key++ ){
            if(key===index2){
              this.classe.push("active")
            }else{
              this.classe.push(key)
            }
          }
          this.arr2=[];
          let me=this
          me.$Global.zcServer.Post({
            IsNeedLogin:'false',
            Paras:{
              UserId:me.$Global.UserId ,
              Name:'Vue_WorkUnit',
              Action:'Xian',
              Data:{
                CitySN:index.SN
              }
            },
            Callback:me.Callback_Xian,
            Scope:me
          });
          return this.classe;
        },
        goNone1(index,index2){

          this.WorkUnit+=index.Name+'-';
          this.ulShow1=false;
          this.ulShow2=false;
          this.ulShow3=true;

          this.classe1=[];
          let list1=this.$refs.list1.getElementsByTagName("li");
          for(let key=0;key<list1.length;key++ ){

            if(key===index2){
              this.classe1.push("active")
            }else{
              this.classe1.push(key)
            }
          }
          let me=this
          console.log(index.SN)
          me.$Global.zcServer.Post({
            IsNeedLogin:'false',
            Paras:{
              UserId:me.$Global.UserId ,
              Name:'Vue_WorkUnit',
              Action:'Unit',
              Data:{
                XianSN:index.SN
              }
            },
            Callback:me.Callback_Unit,
            Scope:me
          });
          return this.classe1;
        },
        goNone2(index,index2){
          this.WorkUnit+=index.Name;
          this.ulShow1=true;
          this.ulShow2=false;
          this.ulShow3=false;
          this.selec=!this.selec;
          this.arr=[];
          this.arr2=[];
          this.bottomShow=!this.bottomShow
          let dataInfo={}
          dataInfo.WorkUnit= this.WorkUnit;
          dataInfo.outKey= this.outKey;
          dataInfo.WorkUnitSN= index.SN;
          this.$emit('Unit', dataInfo)
        },
        /*州市标题选择*/
        unitSelect(index){
          if(index==1){
            this.ulShow1=true;
            this.ulShow2=false;
            this.ulShow3=false;
          }
          if(index==2){
            this.ulShow1=false;
            this.ulShow2=true;
            this.ulShow3=false;
          }
          if(index==3){
            this.ulShow1=false;
            this.ulShow2=false;
            this.ulShow3=true;
          }
        },

      },
      mounted(){
        this.$nextTick(()=>{

      })
      }
    }
</script>

<style scoped>
  /*单位选择*/
.ulContent{
    position: absolute;
    bottom: 0px;
    top:33vh;
    width: 100%;
  }
  /*父组件传过来控制位置*/
#ulContent2{
    position: absolute;
    bottom: 0px;
    /*top:33vh;*/
    width: 100%;
    top:341px;
  }
 .info1{
    z-index: 999;
    position: absolute;
    bottom: 0px;
    top:38px;
    width: 100%;
    overflow: hidden;
  }
 .info1 .right1 ul{
    display: inline-block;
    width: 100%;
    background-color: rgba(93, 194, 240, 1);
    color: white;
    border-right: 1px solid white;

  }
  .titleLi{
    width: 100%;
    overflow: hidden;
    background-color: rgba(93, 194, 240, 1);
    color: white;
    border-right: 1px solid white;
    display: flex;

  }
  .titleLi li{
    flex: 1;
    height: 38px;
    line-height: 38px;
    overflow: hidden;
    background-color: white;
    color: grey;
    border-bottom: 1px solid gainsboro;
    border-top: 1px solid gainsboro;
    border-right: 1px solid gainsboro;

  }
  .titleLi li:last-child{
    border-right:none
  }
  .mui-content .info1 .right1 ul li {
    height: 38px;
    line-height: 38px;
    overflow: hidden;
    background-color: white;
    color: grey;
    border-bottom: 1px solid rgba(93, 194, 240, 1);
  }
  .mui-content .info1 .right1 ul li:last-child{
    border-bottom:none
  }
  .mui-content .info1 .right1 ul .fullScreen{
    width: 100%;
  }

  .titleLi>.active1{
    color: white;
    background-color: rgba(93, 194, 240, 1);
  }
  .mui-content .info1 .right1 ul .active{
    color: white;
    background-color: rgba(93, 194, 240, 1);
  }

</style>
